<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 同时设置 h2 和 h3 元素的内边距、外边距和字体大小 */
			h2,
			h3 {
				padding: 10px;
				margin: 0;
				font-size: 14px;
			}

			/* 设置名为 left 的类的宽度和边框 */
			.left {
				width: 200px;
				border: solid 1px #ccc;
			}

			/* 设置 h2 元素的背景颜色、文字颜色和内边距 */
			h2 {
				background-color: blue;
				color: #fff;
				padding: 10px;
			}

			/* 设置.left 类中的 ul 元素的内边距和左边距，并去除列表样式 */
			.left ul {
				padding-left: 10px;
				margin: 5px;
				list-style: none;
			}

			/* 设置.left 类中的链接的颜色和去除下划线 */
			.left a {
				color: #666;
				text-decoration: none;
			}

			/* 设置水平分割线的样式 */
			hr {
				height: 1px;
				border: none;
				border-top: 1px dashed #CCCCCC;
			}

			/* 设置名为 icon 的类的背景颜色、文字颜色和字体大小 */
			.icon {
				background-color: red;
				color: #fff;
				font-size: 12px
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 一个具有 left 类的 div 元素，用于显示课程相关内容 -->
			<div class="left">
				<!-- 使用 v-for 指令遍历 productList 中的每个产品，并显示标题 -->
				<div v-for="product in productList">
					<!-- 显示产品标题 -->
					<h2>{{product.title}}</h2>
					<!-- 再次使用 v-for 指令遍历产品中的列表项 -->
					<ul>
						<li v-for="item in product.list">
							<!-- 显示链接文本，并设置链接地址 -->
							<a :href="item.url">{{item.name}}</a>
							<!-- 根据 item.hot 的值决定是否显示带有 icon 类的 HOT 字样 -->
							<span :class="{icon:item.hot}" v-if="item.hot">HOT</span>
						</li>
					</ul>
					<!-- 根据产品是否为最后一个决定是否显示水平分割线 -->
					<hr v-if="!product.last" />
				</div>
			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			/* 创建一个名为 vm 的 Vue 实例 */
			var vm = new Vue({
				el: "#app", // 指定 Vue 实例挂载的元素
				data: { // 定义数据
					productList: { // 产品列表对象
						pc: { // 前端技术产品
							title: '前端技术', // 标题
							list: [ // 列表项数组
								{
									name: 'html+css', // 名称
									url: 'http://html.com', // 链接地址
									hot: true // 是否热门
								},
								{
									name: 'JavaScript',
									url: 'http://JavaScript.com'
								},
								{
									name: 'Vue/React',
									url: 'http://Vue.com',
									hot: true
								},
								{
									name: 'node.js',
									url: 'http://node.com'
								}
							]
						},
						app: { // 后端技术产品
							title: '后端技术', // 标题
							last: true, // 是否为最后一个
							list: [ // 列表项数组
								{
									name: 'java',
									url: 'http://java.com'
								},
								{
									name: 'php',
									url: 'http://php.com',
								},
								{
									name: 'express',
									url: 'http://express.com'
								},
								{
									name: 'python',
									url: 'http://python.com'
								}
							]
						}
					}
				}
			})
		</script>
	</body>
</html>